<template>
  <div class="index">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" class="NavBar" border />

    <van-cell-group title="" border>
      <van-cell title="账号安全" is-link border />
      <van-cell title="检查更新" is-link border />
      <van-cell title="关于我们" is-link border />
      <van-cell title="通用" is-link border />
    </van-cell-group>

    <van-cell-group title="" class="xia" border>
      <van-cell title="退出账号" @click="logout" />
    </van-cell-group>
  </div>
</template>

<script>
import { NavBar } from 'vant'
import { Cell, CellGroup } from 'vant'
import { Dialog } from 'vant'
import { Toast } from 'vant'

export default {
  name: 'SetUp',
  data() {
    return {}
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    logout() {
      function beforeClose(action, done) {
        if (action === 'confirm') {
          setTimeout(done, 1000)
          localStorage.clear('id')
          // localStorage.clear('login_time')
        } else {
          done()
        }
      }

      Dialog.confirm({
        title: '标题',
        message: '您确定退出吗?',
        beforeClose
      })
        .then(() => {
          this.$router.push('/')
          Toast.success('退出成功')
        })
        .catch(() => {})
    }
  },
  // 单页背景色
  beforeRouteEnter(to, from, next) {
    document.querySelector('body').setAttribute('style', 'background-color:rgb(216, 216, 216)')
    next()
  },
  beforeRouteLeave(to, from, next) {
    document.querySelector('body').setAttribute('style', '')
    next()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.xia {
  margin-top: 0.3rem;
}
.NavBar {
  background-color: rgb(216, 216, 216);
}
</style>
